<template>
  <div class="add-parking">
    <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="102px" label-position="right">

    <el-form-item label="车场类型:" prop="parkType">
      <el-select v-model="addForm.parkType" size="mini" @change="changeParkType" placeholder="请选择车场类型">
        <el-option label="道尔车场" value="3"/>
        <el-option label="腾达车场" value="4"/>
      </el-select>
    </el-form-item>

    <el-form-item label="车场编号:" prop="parkId">
      <el-input v-model="addForm.parkId" size="mini" style="width: 180px;"></el-input>
    </el-form-item>

    <el-form-item label="车场秘钥:" prop="appName" v-if="appNameShow">
      <el-input v-model="addForm.appName" size="mini" style="width: 180px;"></el-input>
    </el-form-item>

	  <el-form-item label="车场名称:" prop="parkName">
	    <el-input v-model="addForm.parkName" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>
    
    <el-form-item label="开户行:" prop="bankName">
      <el-input v-model="addForm.bankName"></el-input>
    </el-form-item>
    
    <el-form-item label="开户名称:" prop="accountName">
      <el-input v-model="addForm.accountName"></el-input>
    </el-form-item>
    
    <el-form-item label="银行账号:" prop="bankAccount">
      <el-input v-model="addForm.bankAccount"></el-input>
    </el-form-item>

	  <el-form-item label="经度:" prop="longitude">
	    <el-input v-model="addForm.longitude" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="纬度:" prop="latitude">
	    <el-input v-model="addForm.latitude" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="地址:" prop="parkAddress">
	    <el-input v-model="addForm.parkAddress" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="价格描述:" prop="priceDesc">
	    <el-input v-model="addForm.priceDesc" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="预约车位:" prop="reserveParkSpace">
	    <el-input v-model.number="addForm.reserveParkSpace" maxlength="5" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="总车位数:" prop="totalParkSpace">
	    <el-input type="" v-model.number="addForm.totalParkSpace" maxlength="5" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

	  <el-form-item label="联系电话:" prop="telephone">
	    <el-input v-model="addForm.telephone" size="mini" style="width: 180px;"></el-input>
	  </el-form-item>

    <el-form-item label="月租分润:" prop="monthDivide">
      <el-input v-model.number="addForm.monthDivide" maxlength="2" size="mini" style="width: 180px;">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>

    <el-form-item label="订单分润:" prop="orderDivide">
      <el-input v-model.number="addForm.orderDivide" size="mini" style="width: 180px;">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>

    <el-form-item label="单双系统:">
      <el-radio v-model="addForm.singleDoubleSystem" label="1">单系统</el-radio>
      <el-radio v-model="addForm.singleDoubleSystem" label="2">双系统</el-radio>
    </el-form-item>

    <el-form-item label="月租分润开始:">
      <el-date-picker
        v-model="addForm.monthDivideBeginTime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="订单分润开始:">
      <el-date-picker
        v-model="addForm.orderDivideBeginTime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="车场图片:" style="display: block;">
      <ul class="imgshow">
        <li v-for="(item,index) in imgs">
          <img style="height: 100px;" :src="item">
          <div v-if="item" class="icon-delete">
            <i class="el-icon-delete" @click.stop="rmImage(index)" />
          </div>
        </li>
      </ul>
      <ul class="uploadbtn">
        <li @click="uploadBtn" id="image-uploader" style="border: 1px solid #ccc;width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;">
          <input type="file" @change="upload" multiple ref="file" style="display: none;" />
          <i class="el-icon-upload" style="font-size: 50px;"/>
        </li>
      </ul>
    </el-form-item>


    </el-form>

    <div style="text-align: center;">
      <el-button size="mini" @click="$emit('closeDialog')">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submit('ruleForm')">确定</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'add-parking',
    data() {
      var validatorPhone = function (rule, value, callback) {
        if (value == undefined) {
          callback(new Error('手机号不能为空'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      var bankAccountValid = (rule, value, callback) => {
        const strBin = '10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99'
        if (!value) {
          return callback(new Error('收款账户不能为空'))
        } else if (!Number.isInteger(+value)) {
          callback(new Error('银行卡号必须全为数字'))
        } else if (value.trim().length < 12 || value.trim().length > 19) {
          callback(new Error('银行卡号长度必须在12到19之间'))
        } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
          callback(new Error('银行卡号开头6位不符合规范'))
        } else {
          callback()
        }
      }
      return {
        appNameShow: true,
        addForm: {
          parkImgUrl: [],
          singleDoubleSystem: '1'
        },
        imageList: [],
        loading: false,
        imgs: [],
        rules: {
          parkId: [
            { required: true, message: '请输入商户编号', trigger: 'blur' },
          ],
          parkType: [
            { required: true, message: '请选择车场类型',trigger: 'blur'}
          ],
          appName: [
            { required: true, message: '请输入车场秘钥',trigger: 'blur'}
          ],
          parkName: [
            { required: true, message: '请输入车场名称', trigger: 'blur' },
          ],
          longitude: [
            { required: true, message: '请输入车场经度',trigger: 'blur'}
          ],
          latitude: [
            { required: true, message: '请输入车场纬度',trigger: 'blur'}
          ],
          parkAddress: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          priceDesc: [
            { required: true, message: '请输入价格描述',trigger: 'blur'}
          ],
          reserveParkSpace: [
            { required: true, message: '请输入预约车位',trigger: 'blur'}
          ],
          totalParkSpace: [
            { required: true, message: '请输入总车位', trigger: 'blur' },
          ],
          telephone: [
            { required: true, validator: validatorPhone, trigger: 'blur' }
          ],
          bankName: { required: true, message: '请输入开户银行', trigger: 'blur' },
          accountName: { required: true, message: '请输入开户名称', trigger: 'blur' },
          bankAccount: [{ required: true, trigger: 'blur', validator: bankAccountValid }]
          // monthDivide: [
          //   { required: true, message: '请输入月租分润', trigger: 'blur' },
          // ],
          // orderDivide: [
          //   { required: true, message: '请输入停车费分润',trigger: 'blur'}
          // ]
        }
      }
    },
    mounted() {

    },
    methods: {
      submit(ruleForm) {
        this.loading = true;
        this.$refs[ruleForm].validate((valid) => {
          if(valid) {
            if(this.addForm.parkSource == 3) {
              this.$axios({
                method: 'post',
                url: '/park/park-info/getDaoErParkInfo',
                data: this.addForm
              }).then((res) => {
                if(res.code == 200) {
                  this.$message.success('新增车场成功');
                  this.$emit('closeDialog');
                  this.$emit('refresh');
                } else {
                  this.$message.warning(res.desc);
                }
                this.loading = false;
              })
            } else {
              this.$axios({
                method: 'post',
                url: '/park/park-info/add-tengda-park',
                data: this.addForm
              }).then((res) => {
                if(res.code == 200) {
                  this.$message.success('新增车场成功');
                  this.$emit('closeDialog',false);
                  this.$emit('refresh');
                } else {
                  this.$message.warning(res.desc);
                }
                this.loading = false;
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },

      uploadBtn(){
        this.$refs.file.dispatchEvent(new MouseEvent('click'))
      },
      upload(e) {
        let files = e.target.files
        this.$nextTick(() => {
            // this.fileinfo = files[0].name;
            // this.dialogVisible = true
        })
        for (let i = 0; i < files.length; i++) {
          const isImg = files[i].type.indexOf('image') > -1
          const isLimit = files[i].size / 1024 / 1024 < 10

          if (!isImg) {
            this.$message.error('请上传图片格式!')
            return false
          }
          if (!isLimit) {
            this.$message.error('大小不能超过 10MB!')
            return false
          }
          let formData = new FormData()
          formData.append('files', files[i])

          var image = { url: null, percent: 0 }
          this.imageList.push(image.url)

          this.uploadAxios(formData, image)
        }
      },
      uploadAxios(formData, image){
        this.$axios({
          url: 'https://file.zmzncs.com/upload/upload-batch',
          // url: 'http://192.168.92.63:9461/upload/upload-batch',
          method: 'post',
          data: formData,
          timeout: 1000 * 60, // 请求超时时间
          onUploadProgress: (progress)=> {
            image.percent = Math.round(progress.loaded / progress.total * 100)
          }
        }).then((res) => {
          if (res.code == 200) {
            image.percent = 100
            image.url = res.data[0].url
            this.imgs.push(image.url)
            this.addForm.parkImgUrl.push(image.url)
            //  组件返回值
            // var urlList = []
            // this.imgs = [];
            // this.imageList.forEach((image)=> {
            //   this.imgs.push(image.url)
            // })
            // var urls = urlList.toString()
            // this.$emit('input', urls)
          }
        }).catch(err => {})
      },

      rmImage(index) {
        this.$refs.file.value = ''
        this.imageList.splice(index, 1)
        this.imgs.splice(index,1)

        var urlList = []
        this.imageList.forEach((image)=> {
          urlList.push(image.url[1])
        })
        var urls = urlList.toString()
        this.$emit('input', urls)
      },

      changeParkType(v) {
        this.appNameShow = v == 3 ? true : false;
        this.addForm.parkSource = v;
      },

    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item {
    display: inline-block;
    margin-left: 20px;
  }

  .imgshow {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }

  #image-uploader {
    &:hover {
      border: 1px dotted #1989fa;
      .el-icon-upload {
        color: #46a6ff;
      }
    }
    .el-icon-upload {
      font-size: 48px;
      margin: 50px;
    }
  }

  .uploadbtn {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 5px;
      border: 1px dotted #8c939d;
      cursor: pointer;
      border-radius: 10px;
      width: 100px;
      height: 100px;
      .icon-delete {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: default;
        &:hover {
          background-color: rgba(0, 0, 0, .5);
          .el-icon-delete {
            opacity: 1;
          }
        }
        .el-icon-delete {
          font-size: 48px;
          margin: 50px;
          opacity: 0;
          cursor: pointer;
          color: #FFFFFF;
          &:hover {
            color: #46a6ff;
          }
        }
      }
    }
  }

  .imgshow li {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .icon-delete {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      cursor: default;
      &:hover {
        background-color: rgba(0, 0, 0, .5);
        .el-icon-delete {
          opacity: 1;
        }
      }
      .el-icon-delete {
        font-size: 48px;
        margin: 50px;
        opacity: 0;
        cursor: pointer;
        color: #FFFFFF;
        &:hover {
          color: #46a6ff;
        }
      }
    }
  }


</style>
